<template>
	<view>
		<view class="topstatis">
			<view class="topstatis-item">
				<view class="count">{{totalClock}}</view>
				<view class="text">工作时长（客钟）</view>
			</view>
			<view class="topstatis-item">
				<view class="count">{{totalAmount}}</view>
				<view class="text">推荐返佣（元）</view>
			</view>
		</view>
		<view class="myteam-list" v-for="item in list">
			<view class="myteam-list-item" @click="detail(item)">
				<view class="cell01">
					<image src="../../static/usercenter/defaultimg.png"></image>
				</view>
				<view class="cell02">
					<view class="name">{{item.username}}</view>
					<view class="phone">{{item.mobile}}</view>
				</view>
				<view class="cell03">
					<view class="date">{{item.createtime}}</view>
					<view class="reward">+{{item.amount}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalClock:0,
				totalAmount:0,
				list:[]
			}
		},
		onLoad(){
			this.getMyteam();
		},
		methods: {
			
			
			detail(item){
				
				uni.navigateTo({
					url:'./teamWorkList?uid='+item.id
				})
			},
			
			getMyteam(){
				let param = {
					page:1
				};
				let that = this;
				this.$api.teamWorkHistory(param).then(res => {
				
					if (res.code == 1) {
						
						that.totalAmount = res.data.totalAmount;
						that.totalClock = res.data.totalClock;
						that.list = res.data.list;
					} 
					
					console.info(res)
				})
			},
		}
	}
</script>

<style lang="scss">
.topstatis{
	display: flex;
	background: #12ADA9;
	height: 165rpx;
	padding-top: 55rpx;
	.topstatis-item{
		flex: 1;
		.count{
			text-align: center;
			font-size: 48rpx;
			color: #ffffff;
		}
		.text{
			text-align: center;
			font-size: 26rpx;
			color: #ffffff;
		}
	}
}
.myteam-list{
	.myteam-list-item{
		display: flex;
		padding-bottom: 40rpx;
		margin: 40rpx;
		border-bottom: 1rpx solid #EBEBEB;
		.cell01{
			image{
				width: 83rpx;
				height: 83rpx;
				border-radius: 50%;
			}
			margin-right: 20rpx;
		}
		.cell02{
			flex: auto;
			.name{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 7rpx;
			}
			.phone{
				font-size: 26rpx;
				color: #666666;
			}
		}
		
		.cell03{
			.date{
				font-size: 24rpx;
				color: #ADADAD;
			}
			.reward{
				color: #EC3535;
				font-size: 26rpx;
				text-align: right;
				margin-top:19rpx;
			}
		}
	}
}
</style>
